<template>
	<view class="invitationRewards">
		<view class="title">
			16元现金奖励
		</view>
		<view class="desc">
			您的一级好友，完成下列任务，您都会获得相应的奖励，总共获得16元奖励
		</view>
		<view class="ul">
			<view class="li" v-for="item in list">
				<view class="left">
					<image class="icon" :src="item.icon" mode="widthFix">
					</image>
					<view class="cont">
						托管收益满
						<text>1元</text>
					</view>
				</view>
				<view class="right">
					您赚 <text>1.0元</text>
				</view>
			</view>

		</view>

		<view class="title">
			邀新永久提成
		</view>
		<view class="desc">
			您好友完成托管收益，您永久享有相关奖励，一级好友30%，二级好友15%
		</view>
		<view class="canGet">
			<view class="item">
				<view class="top">
					30<text>%</text>
				</view>
				<view class="level">
					一级好友
				</view>
			</view>
			<view class="item">
				<view class="top">
					15<text>%</text>
				</view>
				<view class="level">
					二级好友
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '一级有效好友100人',
					icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/67.png',
					percent: 25,
					money: 100.00
				}, {
					name: '一级有效好友100人',
					icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/68.png',
					percent: 0,
					money: 200.00
				}, {
					name: '一级有效好友100人',
					icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/69.png',
					percent: 0,
					money: 200.00
				}]
			}
		}
	}
</script>

<style scoped lang="scss">
	.invitationRewards {
		padding: 41rpx;
		.canGet{
			display: flex;
			align-items: center;
			
			.item{
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				.top{
					font-size: 50rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFCD66;
					line-height: 1;
					text{
						font-size: 30rpx;
					}
					margin-bottom: 20rpx;
				}
				.level{
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFD466;
					line-height: 38rpx;
				}
			}
			
		}

		.tips {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFD466;
			line-height: 44rpx;
			text-align: center;
		}

		.ul {
			margin:30rpx 0 80rpx;
			.li {
				padding: 0 58rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFD466;
				line-height: 41rpx;

				.left {
					flex: 1;
					display: flex;
					align-items: center;
				}

				.icon {
					width: 38rpx;
					height: 32rpx;
					margin-right: 32rpx;
				}
			}
		}

		.title {
			background: #400FA6;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			padding: 3px 15px;
			display: inline-flex;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #C7ACFF;

		}

		.desc {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 41rpx;
			padding: 20rpx 0;
		}
	}
</style>
